import React, { PureComponent } from "react";
import { connect } from "dva";
// import { routerRedux, Link } from 'dva/router';
import { Form, Input, Button, Checkbox, Icon } from "antd";
import { accesstoken, systemComVaseInfoGet } from "../../services/api";
import IconS from "../../components/IconS";

import "./LogOn.less";

const FormItem = Form.Item;

@connect(state => ({
  register: state.register
}))
@Form.create()
export default class logOn extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      type: "account",
      redirect_uri: ""
    };
  }

  componentDidMount = () => {

  }

  handleSubmit = e => {
    e.preventDefault();
    const { type } = this.state;
    this.props.form.validateFields({ force: true }, (err, values) => {
      console.log(err, values, "err-values-submit");
      if (!err) {
        accesstoken({
          username: values.username,
          password: values.password,
          redirect_uri: this.state.redirect_uri
        }).then(
          data => {
            console.log(data, "accesstoken----data");
            if (data.retType === "0") {
              this.systemComVaseInfoGet();
            }
          },
          err1 => {
            console.log(err1, "accesstoken-err");
          }
        );
        this.props.dispatch({
          type: `login/${type}Submit`,
          payload: values
        });
      }
    });
  };

  systemComVaseInfoGet = () => {
    systemComVaseInfoGet({}).then(
      response => {
        console.log(response, "systemComVaseInfoGet-response-获取企业详情");
        if (response.data === "" || response.data.comId === "") {
          this.props.history.push(
            "/user/PersonalRegistrationResult?type=download"
          );
          return;
        }
        this.props.dispatch({
          type: "global/companyInfo",
          payload: response.data
        });

        if (window.top === window.self) {
          this.props.history.push("/");
        } else {
          const url = window.location.href.split("#")[0];
          window.top.location = url + "#/";
        }
      },
      err => {
        console.log(err, "systemComVaseInfoGet-err-获取企业详情");
      }
    );
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const { type } = this.state;

    return (
      <div className="logOn">
        <div className="login-header" style={{ display: window.top !== window.self && 'none' }}>
          <div className="head-portrait">
            <IconS type="logo-" />
            <span className="head-portrait-text">
              <span style={{ fontSize: "18px" }}>百保盾</span>
              <br />
              <span style={{ fontSize: "12px" }}>改变工作 改变你</span>
            </span>
          </div>
          {/*<div className="head-portrait-register">*/}
            {/*<span*/}
              {/*style={{ cursor: "pointer" }}*/}
              {/*onClick={() => this.props.history.push("Enroll")}*/}
            {/*>*/}
              {/*注册*/}
            {/*</span>*/}
          {/*</div>*/}
        </div>
        <div
          className="login-main-con"
          style={{ minHeight: "calc(100vh - 260px)", paddingTop: window.top !== window.self && '0px' }}
        >
          <div className="logon-content" style={{ padding: window.top !== window.self && '0px', marginLeft: window.top !== window.self && '0px', width: window.top !== window.self && '276px', height: window.top !== window.self && '178px' }}>
            <header style={{ display: window.top !== window.self && 'none' }} className="login-title">企业登录</header>
            <Form onSubmit={this.handleSubmit} className="login-form" style={{ width: window.top !== window.self && '276px' }}>
              <FormItem>
                {getFieldDecorator("username", {
                  rules: [
                    {
                      required: type === "account",
                      pattern: /^1[0-9]{10}$/,
                      message: "请输入正确的账户名！"
                    }
                  ]
                })(
                  <Input
                    size="large"
                    prefix={<Icon type="user" className="prefixIcon" />}
                    placeholder="账号"
                  />
                )}
              </FormItem>
              <FormItem style={{ marginBottom: "8px" }}>
                {getFieldDecorator("password", {
                  rules: [
                    {
                      required: type === "account",
                      message: "请输入密码！"
                    }
                  ]
                })(
                  <Input
                    size="large"
                    prefix={<Icon type="lock" className="prefixIcon" />}
                    type="password"
                    placeholder="密码"
                  />
                )}
                <span style={{ float: 'right', color: '#0f71ff' ,cursor:'pointer' }}
                  onClick={() => this.props.history.push("ForgetPassword")} >
                    忘记密码
                </span>
              </FormItem>
              <FormItem className="additional">
                {getFieldDecorator("remember", {
                  valuePropName: "checked",
                  initialValue: true
                })(
                  <Checkbox style={{ display: "none" }} className="autoLogin">
                    自动登录
                  </Checkbox>
                )}
                {/* <a className="forgot" href="">
                  忘记密码？
                </a> */}
                <Button
                  size="large"
                  className="submit"
                  type="primary"
                  htmlType="submit"
                >
                  登录
                </Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}
